<template>
	<div>
		<el-dialog title="剂量自定义" :visible.sync="dialogVisibleJiLiang" width="1025px" :before-close="handleClose">
			<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="通用剂量自定义设置" name="first">
					<el-card>
						<el-row :gutter="15">
							<el-form label-width="80px">
								<el-col :span="12">
									<el-form-item label="年龄>=">
										<div class="dialogFirstRow">
											<el-input v-model="age_low" v-only-number="{max:10000000000,min:0,precision:0}" size="mini" ></el-input>
											<el-select v-model="age_low_unit" size="mini">
												<el-option v-for="item in ageOptions" :key="item.value" :label="item.label" :value="item.value">
												</el-option>
											</el-select>
											<label><= &nbsp;</label> 
											<el-input v-model="age_high" v-only-number="{max:10000000000,min:0,precision:0}" size="mini"></el-input>
											<el-select v-model="age_high_unit" size="mini">
												<el-option v-for="item in sprOptions" :key="item.value" :label="item.label" :value="item.value">
												</el-option>
											</el-select>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="给药途径">
										<el-input v-model="gytjVal" :readonly="true" size="mini" style="width:235px;"></el-input>
										<input type="hidden" v-model="route_code">
										<el-button type="primary" size="mini" @click="openSelect">选择</el-button>
										<el-button type="primary" size="mini" @click="clearFun">清除</el-button>
									</el-form-item>
								</el-col>
							</el-form>
						</el-row>
					</el-card>
					<el-card class="box-card" style="margin-top:15px">
						<div slot="header" class="clearfix">
							<span style="font-weight: bold">设置（建议先填写频次高值、低值，日剂量，我们会计算一个日剂量的数据供您参考）</span>
						</div>
						<el-row :gutter="15">
							<el-form size="medium" label-width="100px">
								<el-col :span="8">
									<el-form-item label="计算方式">
									<el-select v-model="calculateLabel" size="small" placeholder="请选择计算方式">
									    <el-option
									      v-for="item in jsfsOptions"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value">
									    </el-option>
									  </el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="给药单位">
									<el-select v-model="doseUnit" size="small" placeholder="请选择给药单位">
									    <el-option
									      v-for="item in gydwOptions"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value">
									    </el-option>
									  </el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="持续天数<=">
										<el-input v-model="cxts" v-only-number="{max:10000000000,min:0,precision:0}" size="small" placeholder="请输入持续天数"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="频次低值">
										<el-input v-model="freQuencyLow" size="small" style="width:60px;"></el-input>
										<div style="display:inline-block;">次/</div>
										<el-input v-model="freQuencyLowDay" size="small" style="width:60px;"></el-input>
										<div style="display:inline-block;">天</div>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="频次高值">
										<el-input v-model="freQuencyHigh" size="small" style="width:60px;"></el-input>
										<div style="display:inline-block;">次/</div>
										<el-input v-model="freQuencyHighDay" size="small" style="width:60px;"></el-input>
										<div style="display:inline-block;">天</div>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="审查级别">
										<el-select v-model="freQuencySlCode" size="small" placeholder="请选择审查级别">
											<el-option
											  v-for="item in scjbPCOptions"
											  :key="item.value"
											  :label="item.label"
											  :value="item.value">
											</el-option>
										  </el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="次剂量低值">
										<el-input v-model="doseEachLow" size="small" placeholder="请输入次剂量低值" v-only-number="{max:10000000000,min:0,precision:3}"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="次剂量高值">
										<el-input v-model="doseEachHigh" size="small" placeholder="请输入次剂量高值" v-only-number="{max:10000000000,min:0,precision:3}"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="审查级别">
										<el-select v-model="doseEachSlCode" size="small" placeholder="请选择审查级别">
											<el-option
											  v-for="item in scjbCIOptions"
											  :key="item.value"
											  :label="item.label"
											  :value="item.value">
											</el-option>
										  </el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="日剂量低值">
										<el-input v-model="doseDayLow" size="small" placeholder="请输入日剂量低值" v-only-number="{max:10000000000,min:0,precision:3}"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="日剂量高值">
										<el-input v-model="doseDayHigh" size="small" placeholder="请输入日剂量高值" v-only-number="{max:10000000000,min:0,precision:3}"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="审查级别">
										<el-select v-model="doseDaySlCode" size="small" placeholder="请选择审查级别">
											<el-option
											  v-for="item in scjbRIOptions"
											  :key="item.value"
											  :label="item.label"
											  :value="item.value">
											</el-option>
										  </el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="开方限制<=">
										<el-input v-model="jjdw" size="small" placeholder="请输入开方限制" v-only-number="{max:10000000000,min:0,precision:3}"></el-input> 
									</el-form-item>
								</el-col>
							</el-form>
						</el-row>
						<div style="text-align:right">
							<el-button type="primary" size="medium" @click="onSubmit">保存</el-button>
						</div>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="通用剂量自定义历史列表" name="second">
					<Graytable :tHead="tHead" :tData="tData" @operateClick="operateClick"></Graytable>
					<pagination
						:total="query.total"
						:page.sync="query.page"
						:limit.sync="query.limit"
						@pagination="getList"/>
				</el-tab-pane>
			</el-tabs>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleJiLiang = false">关 闭</el-button>
			</span>
		</el-dialog>
		<SelectDialog ref="selectDialog" :checkId="route_code" @selectFun="selectFun"></SelectDialog>
	</div>
</template>

<script>
	import SelectDialog from "./selectDialog";
	export default {
		components: {
			SelectDialog
		},
		props:{
			dataObj:{
				required:true
			}
		},
		data () {
			return {
				activeName:"first",
				query: {
				  total: 0,
				  page: 1,
				  limit: 10
				},
				gytjVal:"",//给药途径value
				route_code:"",
				calculateLabel:"1",//计算方式value
				jsfsOptions:[
					{
					  value: '1',
					  label: '常规'
					}, {
					  value: '2',
					  label: '体表'
					}, {
					  value: '3',
					  label: '体重'
					}
				],//计算方式options
				doseUnit:"支",//给药单位value
				gydwOptions:[
					{
					  value: '支',
					  label: '支'
					}
				],//给药单位options
				cxts:"",//持续天数
				freQuencyLow:"",//频次低值 次
				freQuencyLowDay:"",//频次低值 天
				freQuencyHigh:"",//频次高值 次
				freQuencyHighDay:"",//频次高值 天
				freQuencySlCode:"0",//频次审查级别value
				scjbPCOptions:[
					{
					  value: '0',
					  label: '拦截'
					},
					{
					  value: '1',
					  label: '禁忌'
					},
					{
					  value: '2',
					  label: '不推荐'
					},
					{
					  value: '3',
					  label: '轻微'
					},
				],//频次审查级别options
				doseEachSlCode:"0",//次剂量审查级别value
				scjbCIOptions:[
					{
					  value: '0',
					  label: '拦截'
					},
					{
					  value: '1',
					  label: '禁忌'
					},
					{
					  value: '2',
					  label: '不推荐'
					},
					{
					  value: '3',
					  label: '轻微'
					},
				],//次剂量审查级别options
				doseDaySlCode:"0",//日剂量审查级别value
				scjbRIOptions:[
					{
					  value: '0',
					  label: '拦截'
					},
					{
					  value: '1',
					  label: '禁忌'
					},
					{
					  value: '2',
					  label: '不推荐'
					},
					{
					  value: '3',
					  label: '轻微'
					},
				],//日剂量审查级别options
				doseEachLow:"",//次剂量低值
				doseEachHigh:"",//次剂量高值
				doseDayLow:"",//日剂量低值
				doseDayHigh:"",//日剂量高值
				jjdw:"",//开方限制
				dialogVisibleJiLiang:false,//弹框开关
				tHead:[
					{
						label:"序号",
						index:true,
						align:"center",
						width:"50px"
					},
					{
						label:"操作",
						operate:["删除"],
						align:"center",
						width:"50px"
					},
					{
						prop:"doseUnit",
						label:"给药单位"
					},
					{
						prop:"agerange",
						label:"年龄范围"
					},
					{
						prop:"pc",
						label:"频次低值|频次高值"
					},
					{
						prop:"cj",
						label:"次剂量低值|次剂高值"
					},
					{
						prop:"rj",
						label:"日剂量低值|高值"
					},
					{
						prop:"calculateLabeltxt",
						label:"计算方式"
					},
					{
						prop:"cxts",
						label:"持续天数"
					},
					{
						prop:"route_code",
						label:"给药途径"
					},
					{
						prop:"jjdw",
						label:"开方限制"
					},
					{
						prop:"user",
						label:"操作人员"
					},
				],
				tData:[],
				age_low_unit:"岁",//年龄value
				ageOptions:[
					{
					  value: '岁',
					  label: '岁'
					},
					{
					  value: '月',
					  label: '月'
					},
					{
					  value: '天',
					  label: '天'
					},
				],//年龄options
				age_low:"",//年龄输入框
				age_high_unit:"岁",//审批人value
				sprOptions:[
					{
					  value: '岁',
					  label: '岁'
					},
					{
					  value: '月',
					  label: '月'
					},
					{
					  value: '天',
					  label: '天'
					},
				],//审批人options
				age_high:"",//审批人输入框
				nowData:{}
			}
		},
		watch:{
			dataObj(val){
				this.nowData=val;
				this.activeName="first";
				this.resetTData();
			}
		},
		methods:{
			handleClick(tab, event){
				if(tab.name=="second"){
					this.query={
						page:1,
						limit:10,
						total:0
					};
					this.tData=[];
					this.getList();
				}
			},
			openSelect () {
				this.$refs.selectDialog.show();
			},
			async getList () {
				let res =await this.$custom.listDosageCommon({
					drugUniqueCode:this.nowData.drugUniqueCode,
					page:this.query.page,
					rows:this.query.limit
				})
				for(var i=0;i<res.rows.length;i++){
					res.rows[i].agerange=res.rows[i].age_low+res.rows[i].age_low_unit+"-"+res.rows[i].age_high+res.rows[i].age_high_unit;
					res.rows[i].pc=(res.rows[i].freQuencyLow?res.rows[i].freQuencyLow:'-')+"次/"+(res.rows[i].freQuencyLowDay?res.rows[i].freQuencyLowDay:'-')+"天|"+(res.rows[i].freQuencyHigh?res.rows[i].freQuencyHigh:'-')+"次/"+(res.rows[i].freQuencyHighDay?res.rows[i].freQuencyHighDay:'-')+"天";
					res.rows[i].cj=(res.rows[i].doseEachLow?res.rows[i].doseEachLow:'-')+res.rows[i].doseUnit+"|"+(res.rows[i].doseEachHigh?res.rows[i].doseEachHigh:'-')+res.rows[i].doseUnit;
					res.rows[i].rj=(res.rows[i].doseDayLow?res.rows[i].doseDayLow:'-')+res.rows[i].doseUnit+"|"+(res.rows[i].doseDayHigh?res.rows[i].doseDayHigh:'-')+res.rows[i].doseUnit;
					
					for(var j=0;j<this.jsfsOptions.length;j++){
						if(this.jsfsOptions[j].value == res.rows[i].calculateLabel){
							res.rows[i].calculateLabeltxt="<span style='color:blue;'>"+this.jsfsOptions[j].label+"</span>";
							break;
						}
					}
					res.rows[i].route_code="<span style='color:blue;'>"+res.rows[i].route_code+"</span>";
					var date=res.rows[i].operTime?this.$utils.timeFormat(res.rows[i].operTime):'';
					res.rows[i].user=res.rows[i].operUser?(res.rows[i].operUser+"/"+date):'';
					var strArr=[];
					for(var k=0;k<res.rows[i].costdwMaps.length;k++){
						strArr.push(res.rows[i].costdwMaps[k].unit_num+res.rows[i].costdwMaps[k].dose_unit);
					};
					res.rows[i].jjdw="<span style='color:blue;'>"+strArr.join(",")+"</span>";
				}
				this.tData=res.rows;
				this.query.total=res.total;
			},
			show(){
				this.dialogVisibleJiLiang = true;
			},
			async onSubmit () {
				if(!this.age_low){
					this.$message({
					  message: "请填写年龄",
					  type:'error',
					  duration:1000
					});
					return;
				}
				if(!this.age_high){
					this.$message({
					  message: "请填写年龄",
					  type:'error',
					  duration:1000
					});
					return;
				}
				if(!this.route_code){
					this.$message({
					  message: "请选择给药途径",
					  type:'error',
					  duration:1000
					});
					return;
				}
				let res=await this.$custom.saveDosageCommon({
					drugUniqueCode:this.nowData.drugUniqueCode,
					age_low:this.age_low,
					age_low_unit:this.age_low_unit,
					age_high: this.age_high,
					age_high_unit:this.age_high_unit,
					route_code:this.route_code,
					calculateLabel:this.calculateLabel,
					doseUnit:this.doseUnit,
					cxts:this.cxts, 
					freQuencyLow:this.freQuencyLow,
					freQuencyLowDay:this.freQuencyLowDay,
					freQuencyHigh:this.freQuencyHigh,
					freQuencyHighDay:this.freQuencyHighDay,
					freQuencySlCode:this.freQuencySlCode,
					doseEachLow:this.doseEachLow,
					doseEachHigh:this.doseEachHigh,
					doseEachSlCode:this.doseEachSlCode,
					doseDayLow:this.doseDayLow,
					doseDayHigh:this.doseDayHigh,
					doseDaySlCode:this.doseDaySlCode,
					jjdw:this.jjdw
				})
				this.$message({
				  message: res.msg,
				  type: res.code == 1?'success':'error',
				  duration:1500
				});
				this.resetTData()
			},
			handleClose () {
				this.dialogVisibleJiLiang = false;
			},
			selectFun(id,name){
				this.gytjVal=name;
				this.route_code=id;
			},
			clearFun(){
				this.gytjVal="";
				this.route_code="";
			},
			operateClick(val,row){
				this.$confirm('确定删除通用自定义?', '提示', {
					confirmButtonText: '确定删除',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.delFun(row);
				}).catch(() => {
				});
			},
			resetTData(flag){
				this.age_low="";
				this.age_low_unit="岁";
				this.age_high="";
				this.age_high_unit="岁";
				this.gytjVal="";
				this.route_code="";
				this.calculateLabel="1";
				this.doseUnit="支";
				this.cxts=""; 
				this.freQuencyLow="";
				this.freQuencyLowDay="";
				this.freQuencyHigh="";
				this.freQuencyHighDay="";
				this.freQuencySlCode="0";
				this.doseEachLow="";
				this.doseEachHigh="";
				this.doseEachSlCode="0";
				this.doseDayLow="";
				this.doseDayHigh="";
				this.doseDaySlCode="0";
				this.jjdw="";
				this.query={
					total:0,
					page:1,
					limit:10
				}
				this.tData=[];
				this.getList();
				if(!flag){
					this.$emit("changeFun")
				}
			},
			async delFun(row){
				let res=await this.$custom.delDosageCommon({
					id:row.id
				})
				this.$message({
				  message: res.msg,
				  type: res.code == 1?'success':'error',
				  duration:1500
				});
				this.resetTData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-card {
		margin-left: 3px;
	}

	.SearchT {
		display: flex;
		justify-content: flex-end;
		height: 40px;
		align-items: center;
		background-color: #e6edf3;
		font-size: 14px;
	}

	.tableLable {
		flex: 1;
		text-align: left;
		margin-left: 15px;
		letter-spacing: 2px;
		font-size: 14px;
		color: #32a6f3;
		font-weight: bold;
	}

	/* .exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
} */
	.tableStyle {
		width: 100%;
		height: 100%;
	}

	.card-table {
		width: 100%;
		height: 75%;
	}

	.block {
		text-align: center;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.Btn {
		display: flex;
		flex: 1;
		flex-wrap: nowrap;
	}

	.dialogFirstRow>>>.el-input {
		width: 70px;
	}
	.demo-form-inline>>>.el-form-item {
		margin-bottom: 0px;
	}
</style>
